<template>
  <div class="tab-container waybill-tab-container tab-fixed" v-if="showdata">
    <el-tabs v-model="activeName">
      <el-tab-pane label="清关发票" name="edit">
        <keep-alive>
          <div class="padding">
            <!-- <el-button @click="toPage">toPage</el-button> -->
            <ProgressBar
              ref="bar"
              @saveStateLine="saveStateLine"
              :waybillInfo="waybillData"
            ></ProgressBar>
            <BasicInfo
              :pageType="`airFreight`"
              :waybillData="waybillData"
            ></BasicInfo>
            <WaybillInfo :pageType="`airFreight`"></WaybillInfo>
            <MasterOrder
              :pageType="`airFreight`"
              :waybillData="waybillData"
            ></MasterOrder>
            <HouseOrder
              :pageType="`airFreight`"
              :waybillData="waybillData"
            ></HouseOrder>
            <HouseBill
              :pageType="`airFreight`"
              :waybillData="waybillData"
            ></HouseBill>
          </div>
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="文件列表" name="fileList" lazy>
        <FileList></FileList>
      </el-tab-pane>
      <el-tab-pane label="应收应付" name="receivable" lazy>
        <Receivable></Receivable>
      </el-tab-pane>
      <el-tab-pane label="阿米巴" name="fileList1" disabled lazy> </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
const ProgressBar = () => import("@/components/app/components/ProgressBar");
import FileList from "./../alledit/components/FileList";
import BasicInfo from "./components/BasicInfo";
import WaybillInfo from "./components/WaybillInfo";
import MasterOrder from "./components/MasterOrder";
import HouseOrder from "./components/HouseOrder";
import HouseBill from "./components/HouseBill";
import Receivable from "./components/Receivable";
import { ajax } from "@/store/yg/common/utils";

export default {
  components: {
    ProgressBar,
    FileList,
    BasicInfo,
    WaybillInfo,
    HouseOrder,
    MasterOrder,
    HouseBill,
    Receivable
  },
  props: [],
  data() {
    return {
      showdata: false,
      waybillData: {},
      waybillId: "",
      shippingway: "",
      activeName: "edit",
      countryMap: {},
      serviceItemMap: {}
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.waybillId = this.$route.query.waybillId;
    this.shippingway = this.$route.query.shippingway;
    var activeNameTab = this.$route.query.activeName;
    this.showTabByActive(activeNameTab);
    console.info(this.waybillId, this.shippingway);
    this.initWayBillData();
  },
  methods: {
    showTabByActive(activeNameTab) {
      if (null != activeNameTab && activeNameTab != "") {
        this.activeName = activeNameTab;
      }
    },
    async init() {
      const { countryMap } = await initData();
      const { data } = await initAbroadWaybillRender();

      this.countryMap = countryMap;
      this.serviceItemMap = data.serviceItemMap;
    },

    initWayBillData() {
      var param = {};
      param["id"] = this.waybillId;
      param["shippingWayType"] = this.$route.query.shippingway;
      ajax("editWaybillMergeAll", param).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            this.waybillData = res.data;
            console.info("空运数据：", res.data);
          }
          this.showdata = true;
        },
        error => {
          console.log(error);
        }
      );
    },
    async saveStateLine(params) {
      //保存轨迹节点
      console.log("params", params);
      console.log("Constatvariable", this.Constatvariable);
      params.waybillId = this.Constatvariable.id;
      params.time = params.operationDateTime;
      params.clickStatus = params.status;
      console.log("params2", params);
      const data = await ajax("updateWaybillStateAndTime", params);

      if (data.code === 200) {
        this.initWaybillData();
      } else {
        this.$message.error(data.failTips);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.title-icon {
  display: inline-block;
  width: 120px;
}
</style>

<style scoped>
/deep/ .el-tabs__item.is-disabled {
  color: #51abd1;
}

/deep/ .el-form-item__content {
  font-size: 12px;
}

/deep/ .el-autocomplete {
  width: 100%;
}
</style>
